<template>
  <div class="app-container">
    <div class="table">
      <el-form class="search-container" :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="教师姓名" prop="nickName">
          <el-input v-model="queryParams.nickName" placeholder="请输入教师姓名" clearable style="width: 200px" @keyup.enter="handleQuery" />
        </el-form-item>

        <el-form-item label="工号" prop="teachId">
          <el-input v-model="queryParams.teachId" placeholder="请输入工号" clearable style="width: 200px" @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="学院" prop="deptId">
          <el-select v-model="queryParams.deptId" placeholder="请选择学院" clearable filterable style="width: 100%" @change="onDeptChange">
            <el-option v-for="opt in deptTree" :key="opt.deptId" :label="opt.deptName" :value="opt.deptId" />
          </el-select>
        </el-form-item>
        <el-form-item label="研究方向" prop="majorField">
          <el-input v-model="queryParams.majorField" placeholder="请输入研究方向" clearable style="width: 200px" @keyup.enter="handleQuery" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="table-container">
        <el-row :gutter="10" class="mb8">
          <span>教师信息列表</span>
          <right-toolbar
            v-model:showSearch="showSearch"
            @queryTable="getList"
            add="system:teacher:add"
            @handleAdd="handleAdd"
            update="system:teacher:edit"
            @handleUpdate="handleUpdate"
            del="system:teacher:remove"
            @handleDelete="handleDelete"
             imp="system:teacher:import"
            @handleImport="handleImport"
            exp="system:teacher:export"
            @handleExport="handleExport"
            :single="single"
            :multiple="multiple"
          ></right-toolbar>
        </el-row>
        <el-table v-loading="loading" class="table-content" border :data="teacherList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="工号" align="center" prop="teachId" />
          <el-table-column label="姓名" align="center" prop="user.nickName" />
          <el-table-column label="所属学院" align="center" prop="user.dept.deptName" />
          <el-table-column label="邮箱" align="center" prop="email" />
          <el-table-column label="研究方向" align="center" prop="majorField" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template v-slot="{ row }">
              <el-button link type="primary" icon="Edit" @click="handleUpdate(row)" v-hasPermi="['system:teacher:edit']">修改</el-button>
              <el-button link type="danger" icon="Delete" @click="handleDelete(row)" v-hasPermi="['system:teacher:remove']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination class="pagination-container" v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </div>
  </div>
  <index-dialog ref="dialogRef" :tree="deptTree" @update="updateHandler"></index-dialog>
   <excel-upload-dialog
    ref="uploadDialogRef"
    title="教师数据导入"
    :upload-url="uploadUrl"
    template-url="system/teacher/exportTemplate"
    @success="handleUploadSuccess"
  />
</template>

<script setup name="Teacher">
import { listTeacher, getTeacher, delTeacher, addTeacher, updateTeacher } from '@/api/teacher'
import { getCurrentInstance, ref, computed } from 'vue'
import { getGradeTree } from '@/api/grade'
import indexDialog from './components/indexDialog.vue'
import ExcelUploadDialog from '@/components/business/ExcelUploadDialog.vue'
const { proxy } = getCurrentInstance()
const uploadDialogRef = ref(null)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const single = ref(true)
const multiple = ref(true)
const total = ref(0)
const teacherList = ref([])
const dialogRef = ref(null)
const queryRef = ref(null)
// 上传地址
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + '/system/teacher/importData')

const queryHandler = () => {
  queryParams.value.pageNum = 1
  getList()
}
/** 导入成功回调 */
const handleUploadSuccess = () => {
  getList()
}

const getList = () => {
  loading.value = true
  listTeacher(queryParams.value).then(({ data }) => {
    teacherList.value = data.rows
    total.value = data.total
    loading.value = false
  })
}
const deptTree = ref([])
/** 初始化部门树 */
const initDeptTree = async () => {
  try {
    const res = await getGradeTree()
    deptTree.value = res.data || []
  } catch {
    deptTree.value = []
  }
}
/** 导入按钮操作 */
const handleImport = () => {
  uploadDialogRef.value.open()
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.teacherId)
  single.value = selection.length != 1
  multiple.value = !selection.length
}
/** 重置按钮操作 */
const resetQuery = () => {
  proxy.resetForm('queryRef')
  queryHandler()
}
/** 修改按钮操作 */
const handleUpdate = (row) => {
  const teacherId = row?.teacherId || ids.value
  dialogRef.value.openDialog(teacherId)
}
/** 新增按钮操作 */
const handleAdd = () => {
  dialogRef.value.openDialog()
}
/** 删除按钮操作 */
const handleDelete = (row) => {
  const teacherId = row?.teacherId || ids.value
  proxy.$modal
    .confirm('是否确认删除编号为"' + teacherId + '"的数据项?')
    .then(function () {
      return delTeacher(teacherId)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => {})
}
const updateHandler = () => {
  queryHandler()
}
const handleExport = () => {
  proxy.download('system/teacher/export', { ...queryParams.value }, `teacher_${new Date().getTime()}.xlsx`)
}
getList()
initDeptTree()
</script>
